<template>
  <div class="home">
    <!-- 首页 四个卡片 -->
    <el-row class="row_one" :gutter="40" >
      <el-col :span="8" class="loufangshu">
        <el-row :gutter="40">
          <el-col :span="12" class="card_1">
            <el-card shadow="always">
              <i class="icon_1">&#xe610;</i>
              <div>
                <div class="title">楼房数</div>
                <div class="val">12306</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12" class="card_2">
            <el-card shadow="always">
              <i class="el-icon-school icon_2"></i>
              <div>
                <div class="title">房间数</div>
                <div class="val">12306</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="40" style="margin-bottom: 0px;">
          <el-col :span="12" class="card_3">
            <el-card shadow="always">
              <i class="el-icon-user-solid icon_3"></i>
              <div>
                <div class="title">宿管数</div>
                <div class="val">12306</div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="12" class="card_4">
            <el-card shadow="always">
              <i class="el-icon-s-custom icon_4"></i>
              <div>
                <div class="title">学生数</div>
                <div class="val">12306</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8" >
        <el-card>
          <carousel></carousel>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="rili">
         <Calendar></Calendar>
        </el-card>
      </el-col>
    </el-row>
    <!-- 中间 -->
    <el-row :gutter="40">
      <el-col :span="14">
        <el-card>
          <echarts-line></echarts-line>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card>
          <echarts-bar></echarts-bar>
        </el-card>
      </el-col>
    </el-row>
    <!-- 底部 -->
    <el-row :gutter="40">
      <el-col :span="12">
        <el-card>
          
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card> </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import Login from "./Login.vue";
import Aside from "../components/Aside.vue";

import echartsLine from "../components/home/echartsLine.vue";
import echartsBar from "../components/home/echartsBar.vue";
import carousel from "../components/home/carousel.vue";
// 引入日历组件
import Calendar from "vue-calendar-component"
export default {
  name: "Home",
  data(){
    return{
      nowTime:new Date(),
    }
  },
  mounted() {
    // this.$router.push("/login");
  },
  components: {
    Login,
    Aside,
    echartsLine,
    echartsBar,
    carousel,
    Calendar,
  },
};
</script>

<style scoped>
/deep/.el-card__body {
  /* padding: 10px 20px; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.rili /deep/.el-card__body,
.row_one>div:nth-child(2) /deep/ .el-card__body{
  padding: 0px;
}
.row_one>div:first-child /deep/ .el-card__body{
  height: 10vh;
}
.el-row {
  margin-bottom: 20px;
}
.row_one{
  height: 32vh;
}
.row_one>div{
  height: 100%;
}
.row_one>div:nth-child(3){
  display: flex;
}
i {
  font-size: 50px;
  line-height: 80px;
  border-radius: 6px;
  text-align: center;
  width: 80px;
  height: 80px;
}
i:hover {
  background: red;
}

.icon_1 {
  color: rgb(64, 201, 198);
  font-family: iconfont;
  font-size: 50px;
}
.icon_2 {
  color: rgb(54, 163, 247);
}
.icon_3 {
  color: rgb(244, 81, 108);
}
.icon_4 {
  color: rgb(52, 191, 103);
}
.card_1:hover .icon_1 {
  color: #fff;
  background: rgb(64, 201, 198);
}
.card_2:hover .icon_2 {
  color: #fff;
  background: rgb(54, 163, 247);
}
.card_3:hover .icon_3 {
  color: #fff;
  background: rgb(244, 81, 108);
}
.card_4:hover .icon_4 {
  color: #fff;
  background: rgb(52, 191, 103);
}

.title {
  color: rgba(0, 0, 0, 0.45);
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}
.card_1 .val {
  color: rgb(64, 201, 198);
}
.card_2 .val {
  color: rgb(54, 163, 247);
}
.card_3 .val {
  color: rgb(244, 81, 108);
}
.card_4 .val {
  color: rgb(52, 191, 103);
}
/deep/.el-calendar-table .el-calendar-day{
    /* width: 20px; */
    height: 25px;
    margin: 0px;
    text-align: center;
    padding: 0;
    font-size: 14px;
  }
.el-calendar{
  height: 26vh;
}
/deep/.el-calendar-table thead th {
    padding: 0 0 12px 0;
    font-size: 16px;
    }
.val {
  color: #666;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
@font-face {
  font-family: "iconfont"; /* project id 3245781 */
  src: url("?#iefix") format("embedded-opentype"),
    url("../font/loufang/iconfont.woff2") format("woff2"),
    url("../font/loufang/iconfont.woff") format("woff"),
    url("../font/loufang/iconfont.ttf") format("truetype"),
    url("#iconfont") format("svg");
}
</style>